<template>
	<view>
		<u-popup :show="show" :round="10" mode="bottom" bgColor="#282828" closeable @close="show=false;sendshow=false">
			<view class="flexleft mainpadding" v-if="!chongzhishow && !tonghuashow">
				<view class="flexcolumn margin_right6" @click="currenttype=1">
					<view class="bold titletext" :class="currenttype==1?'xiaolan':'xiaohui'">礼物</view>
					<view class=" margin_top2" :class="currenttype==1?'lanline':'huiline'"></view>
				</view>
				<view class="flexcolumn margin_right6" @click="currenttype=2" v-if="!userinfo.is_plg">
					<view class="bold titletext" :class="currenttype==2?'xiaolan':'xiaohui'">服务</view>
					<view class="margin_top2" :class="currenttype==2?'lanline':'huiline'"></view>
				</view>
			</view>
			<!-- 送礼物 -->
			<view class="" v-if="currenttype==1 && !chongzhishow && !tonghuashow">
				<scroll-view scroll-y="true" style="height: 350rpx;">
					<view class="flexleft flex_wrap">
						<view class="sanshis flexcenter" style="margin-top: 15rpx;" v-for="item in lwList" :key="item.id" @click.stop="sendlwfs(item)">
							<view class="flexcolumn liwuhezi">
								<image :src="item.image_text" style="width: 120rpx;height: 120rpx;" mode="">
								</image>
								<text class="margin_top2 textcenter bold">{{item.name}}</text>
								<view class="xiaohui smalltext margin_top1">{{item.jb_num}}金币</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="flexleft margin_top mainpadding2">
					<view class="bottomjbcz flexleft" @click="chongzhishow=true;flag=2">
						<image src="@/static/image/system/jinbi.png" class="margin_right1" style="width: 30rpx;height: 30rpx;" mode="">
						</image>
						<view class="xiaobai sanshier bold margin_right1" style="line-height: 32rpx;">{{myJbNum || 0}}</view>
						<view class="ershil" style="color: #FFC55B;">充值</view>
						<u-icon name="arrow-right" color="#FFC55B" size="16"></u-icon>
					</view>
				</view>
			</view>
			<view class="" v-if="currenttype==2 && !chongzhishow && !tonghuashow">
				<scroll-view scroll-y="true" style="height: 360rpx;">
					<view class="flexbetween flex_wrap mainpadding2">
						<view class="changliaobox flexleft" style="margin-top: 15rpx;" v-for="item in clList" :key="item.id" @click.stop="changliaopay(item)">
							<image src="../../static/image/system/changliao.png" style="width: 120rpx;height: 90rpx;margin-right: 10rpx;" mode=""></image>
							<view class="flexcolumnbet" style="height: 90rpx;">
								<view class="flexbottom" style="justify-content: flex-start;">
									<view class="sanshil xiaobai bold" style="font-size: 40rpx;">{{item.days}}</view>
									<view class="xiaobai ershil margin_right1">天畅聊</view>
								</view>
								<text class="sanshil xiaobai bold" style="font-size: 30rpx;">￥{{item.price}}</text>
							</view>
						</view>
						<view class="changliaobox flexleft" style="margin-top: 15rpx;" @click="sendmsg()" v-if="sendshow">
							<image src="../../static/image/system/changliao.png" style="width: 120rpx;height: 90rpx;margin-right: 10rpx;" mode=""></image>
							<view class="flexcolumnbet" style="height: 90rpx;">
								<view class="flexbottom" style="justify-content: flex-start;">
									<view class="xiaobai ershil margin_right1">单次发送</view>
								</view>
								<text class="sanshil xiaobai bold" style="font-size: 30rpx;">10金币一条</text>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="flexleft margin_top mainpadding2">
					<view class="bottomjbcz flexleft" @click="chongzhishow=true">
						<u-icon name="chat" color="#fff" size="20"></u-icon>
						<view class="xiaobai ershiba margin_right1" style="line-height: 32rpx;">服务剩余(天)：</view>
						<view class="ershil" style="color: #2361FF;">{{userinfo.chat_days || 0}}</view>
					</view>
				</view>
			</view>
			<!-- 充值 -->
			<view class="mainpadding" v-if="chongzhishow">
				<view class="flexleft" @click="backpage">
					<u-icon name="arrow-left" color="#fff" size="16"></u-icon>
					<text class="xiaobai bold margin_left2" style="font-size: 30rpx;font-weight: 900;">充值</text>
				</view>
				<view class="flexleft margin_top">
					<text class="xiaohui ershiba">金币余额：</text>
					<text class="xiaobai">{{myJbNum || 0}}</text>
				</view>
				<view class="margin_top6 flexleft flex_wrap">
					<view class="sanshis flexcenter" style="margin-top: 15rpx;" v-for="item in czList" :key="item.id"
						@click="jb_item_id=item.id;payprice=item.price">
						<view class="flexcolumn" :class="item.id==jb_item_id?'itemdss':'itemds'">
							<view class="flexcenter" >
								<image src="@/static/image/system/jinbi.png" style="width: 30rpx;height: 30rpx;" mode="">
								</image>
								<text :class="item.id==jb_item_id?'xiaobai':'xiaobai'">{{item.jb_num}}</text>
							</view>
							<view class="xiaobai strongtext margin_top2">售价{{item.price}}</view>
						</view>
					</view>
				</view>
				<view class="margin_top6">
					<text class="buttombtn textcenter xiaobai" @click="chongzhi">立即充值</text>
				</view>
			</view>
			<!-- 通话提示 -->
			<view class="mainpadding" v-if="tonghuashow">
				<view class="flexleft">
					<text class="xiaobai bold margin_left2" style="font-size: 30rpx;font-weight: 900;">{{tonghuaflag==1?'音频':"视频"}}通话</text>
				</view>
				<view class="flexleft">
					<view class="xiaobai strongtext margin_top2">当前好友{{tonghuaflag==1?'音频':"视频"}}通话价格：</view>
					<view class="xiaobai ershiba fonweight margin_top2">{{tonghuajg}}金币/分钟</view>
				</view>
				<view class="flexleft margin_top">
					<view class="bottomjbcz flexleft" @click="chongzhishow=true;tonghuashow=false;flag=2">
						<image src="@/static/image/system/jinbi.png" class="margin_right1" style="width: 30rpx;height: 30rpx;" mode="">
						</image>
						<view class="xiaobai sanshier bold margin_right1" style="line-height: 32rpx;">{{myJbNum || 0}}</view>
						<view class="ershil" style="color: #FFC55B;">充值</view>
						<u-icon name="arrow-right" color="#FFC55B" size="16"></u-icon>
					</view>
				</view>
				<view class="margin_top6">
					<text class="buttombtn textcenter xiaobai" @click="tonghua">开始通话</text>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		name: "liwu",
		props: ["send_user_id"],
		data() {
			return {
				show: false,
				jb_item_id: "",
				czList: [],
				lwList: [],
				clList:[],
				myJbNum: "",
				currenttype:1,//1礼物，2服务，3充值
				chongzhishow:false,
				tonghuashow:false,//通话
				payprice:"",
				userinfo:{},
				flag:2,
				tonghuajg:"",
				tonghuaflag:1,//1语音，2视频
				sendshow:false,//是否显示发送10金币按钮
				upimg:false,//是否是发送图片视频
			};
		},
		created() {
			this.getczinit()
			this.getlwinit()
			this.getclinit()
			this.userinfofn()
		},
		methods: {
			sendmsg(){
				if(this.upimg){
					this.$parent.selectfile(1)
				}else{
					this.$parent.send(1)
				}
				this.myJbNum = Number(this.myJbNum) - 10
				this.show=false
				this.sendshow = false
			},
			backpage(){
				this.chongzhishow = false
				if(this.flag==2){
					this.tonghuashow = true
				}
			},
			tonghua(){
				this.$emit("callphone","")
				this.show = false
				this.tonghuashow = false
			},
			sendlwfs(item){
				httpRequest.request('/api/user/sendGift', 'GET', {
					gift_id:item.id,
					send_user_id:this.send_user_id
				}).then(res => {
					if(res.code==1){
						this.$emit("sendlw",item.image)
						this.myJbNum = Number(this.myJbNum) - Number(item.jb_num)
						this.show=false
					}else{
						httpRequest.toast(res.msg)
					}
				})
			},
			getczinit() {//充值数据
				httpRequest.request('/api/Rechargecl/jbItem', 'GET', {}).then(res => {
					this.czList = res.data
				})
			},
			getlwinit() {//礼物数据
				httpRequest.request('/api/user/giftIndex', 'GET', {}).then(res => {
					this.lwList = res.data
				})
			},
			getclinit() {//畅聊数据
				httpRequest.request('/api/chatcardcl/chatcardIndex', 'GET', {}).then(res => {
					this.clList = res.data
				})
			},
			userinfofn() {
				if (!httpRequest.checkIsLogin()) {
					return false;
				}
				console.log("调取用户信息接口了");
				httpRequest.request('/api/user/index', 'GET', {}).then(res => {
					this.myJbNum = res.data.jb_num
					this.userinfo = res.data
				})
			},
			chongzhi(){//充值金币
				if(this.jb_item_id==""){
					httpRequest.toast("请选择充值项")
					return false
				}
				let data = {
					price:this.payprice,
					jb_item_id:this.jb_item_id
				}
				uni.navigateTo({
					url:"/pages_mypage/lijicz?msg="+encodeURIComponent(JSON.stringify(data))
				})
			},
			changliaopay(item){//畅聊时间购买
				let data = {
					type:1,
					price:item.price,
					jb_item_id:item.id
				}
				uni.navigateTo({
					url:"/pages_mypage/lijicz?msg="+encodeURIComponent(JSON.stringify(data))
				})
			}
			
		}
	}
</script>

<style>
	.changliaobox{
		width: 49%;
		background-color: #474747;
		padding: 40rpx 0 40rpx 20rpx;
		border-radius: 20rpx;
	}
	.bottomjbcz{
		background-color: #535353;
		border-radius: 50rpx;
		padding: 20rpx 30rpx;
	}
	.lanline{
		width: 40rpx;
		height: 5rpx;
		background-color: #2261ff;
	}
	.huiline{
		width: 40rpx;
		height: 5rpx;
	}
	.sanshis {
		width: 33.33%;
	}

	.itemds {
		width: 210rpx;
		padding: 30rpx 0;
		background-color: ##282828;
		border: 1rpx solid #474747;
		border-radius: 10rpx;
		font-size: 40rpx;
		color: #fff;
		font-weight: bold;
	}

	.itemdss {
		width: 210rpx;
		padding: 30rpx 0;
		background-color: #474747;
		border-radius: 10rpx;
		border: 1rpx solid #474747;
		font-size: 40rpx;
		color: #fff;
		font-weight: bold;
	}
	.liwuhezi{
		width: 210rpx;
		padding: 30rpx 0;
		font-size: 30rpx;
		color: #fff;
	}

	.buttombtn {
		display: block;
		width: 690rpx;
		border-radius: 50rpx;
		background-color: #2261ff;
		padding: 20rpx 0;
	}
</style>